<template>
  <div :style="defaultStyle" :class="isActiveClass">
    <div class="category-tab" :style="contentStyle">
      <div class="tab-header">
        <div
          v-for="(tab, index) in contentData.tabs"
          :key="index"
          class="tab-item"
          :style="tabItemStyle(index)"
          :class="{ active: currentTabIndex === index }"
          @click="currentTabIndex = index"
        >
          <div>{{ tab.name }}</div>
        </div>
        <div class="tab-item"
          ><span class="car-bg">小车</span><i class="iconfont-sys car-bg">&#xe865;</i></div
        >
      </div>
      <div class="tab-content">
        <div class="info-item">
          <div class="progress"><p class="num">1</p><p class="total-num">/2000</p></div>
          <p class="name">练题进度</p>
          <p class="tip">正确率50%</p>
        </div>
        <div class="info-item">
          <p class="num">0</p>
          <p class="name">模拟平均分</p>
          <p class="tip">累计考试11次</p>
        </div>
        <div class="info-item" v-if="contentData.linkImage">
          <img :src="contentData.linkImage" class="link-image" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String
    }
  })

  const currentTabIndex = ref(0)

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      backgroundColor: s.backgroundColor,
      overflow: 'hidden'
    }
  })

  function tabItemStyle(index: number) {
    const style = props.contentData.tabStyle || {}
    const isActive = currentTabIndex.value === index
    return {
      color: isActive ? style.titleColor || '#333' : style.inactiveTitleColor || '#999',
      fontSize: isActive ? `${style.tabFontSize}px` : `${style.tabFontSize - 4}px`
    }
  }
</script>

<style scoped lang="scss">
  .category-tab {
    padding: 10px 10px 10px 25px;
  }

  .tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;

    .tab-item {
      position: relative;
      padding: 6px 0;
      cursor: pointer;
    }

    .active {
      color: black;
      font-weight: 600;
    }

    .active::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      width: 0;
      height: 5px;
      background-color: v-bind('contentData.tabStyle?.underlineColor || "#03c36b"');
      border-radius: 12px;
      transform: translateX(-50%);
      transition: width 0.3s ease-out;
    }

    .active::after {
      width: 50%;
    }
  }

  .tab-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //padding: 0 10px;

    .info-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .num {
        font-size: 16px;
        font-weight: bold;
        color: #000;
      }

      .name {
        font-size: 14px;
        color: #000;
        margin: 6px 0;
      }

      .tip {
        color: #ccc;
        font-size: 12px;
      }
    }

    .info-item:not(:last-child) {
      margin-right: 30px;
    }

    .progress {
      display: flex;
      align-items: end;

      .total-num {
        font-size: 12px;
        color: #999999;
        font-weight: bold;
      }
    }
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }

  .link-image {
    width: 75px;
    height: 75px;
    object-fit: contain;
  }

  .car-bg {
    color: var(--el-color-primary);
  }
</style>
